<template>
  <div class="page">
    <div class="mask-box"></div>
    <div class="layer-box">
      <div class="box-header">{{layerHeadTitle}}</div>
      <div class="box-body">{{layerBodyTip}}</div>
      <div class="box-footer">
        <div class="cancle-btn" @click="closeMaskForm">取消</div>
        <div class="sublime-btn" @click="sureBtnEvent">确定</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['layerHeadTitle','layerBodyTip'],
    methods: {
      sureBtnEvent(){
        this.$emit('sureBtnEvent')
      },
      closeMaskForm(){
        this.$emit('closeMaskForm')
      }
    }
  }
</script>

<style lang="less">
  .mask-box{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background: @maskColor;
  }
  .layer-box{
    position: absolute;
    width: 560px;
    height: 300px;
    background-color: @white;
    border-radius: 20px;
    left: 50%;
    margin-left: -280px;
    top: 50%;
    margin-top: -150px;
    z-index: 20;
    .box-header{
      font-size: 36px;
      color: #181818;
      letter-spacing: 1.11px;
      text-align: center;
      padding: 36px 0;
      font-weight: bold;
    }
    .box-body{
      font-size: 30px;
      color: rgba(24,24,24,0.84);
      letter-spacing: 0.92px;
      text-align: center;
    }
    .box-footer{
      margin-top: 32px;
      display: flex;
      div{
        width: 50%;
        text-align: center;
        font-size: 32px;
        color: #696969;
        padding: 32px 0px;
        &.sublime-btn{
          color: #F44A4A;
        }
      }

    }
  }
</style>
